ul{list-style: none;}
a{color:black;}
h2{font-weight: 700;}

/*加载动画*/
#preloader{position:fixed;top:0;left:0;height:100%;width:100%;z-index:999;transition: all 1s 1s ease;}
#preloader  .left, #preloader  .right{position:absolute;top:0;width:51%;height:100%;background: rgb(0,0,0);overflow:hidden;z-index:99;transition:all 1s 1s ease;}
#preloader  .left{left:0;}
#preloader  .right{right:0;}
body.loaded #preloader{visibility:hidden;}
body.loaded #preloader  .left{left:-50%;}
body.loaded #preloader  .right{right:-50%;}
body.loaded #preloader  .left,
body.loaded #preloader  .right,
body.loaded #preloader .loader{opacity:0;visibility:hidden;}
.loader{height:140px;width:140px;border:solid 4px #FFF;border-top-color:#303F9F;border-right-color:#303F9F;border-radius:50%;position:absolute;top:50%;right:0;left:0;margin:auto;margin-top:-70px;transition:all 1s ease;z-index:199;animation:loader 2s 4 linear;}
.loader:before, .loader:after{content: ' ';position:absolute;border:inherit;border-radius:50%;}
.loader:before{left:15px;top:15px;bottom:15px;right:15px;opacity:.5;animation: loader 3s infinite linear;}
.loader:after{left:30px;right:30px;top:30px;bottom:30px;opacity:.25;animation: loader 1.5s infinite linear;}
@keyframes loader{
    0%{transform:rotate(0deg);}
    100%{  transform:rotate(360deg);}
}

/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */

html { overflow-y: scroll; }
.row{margin:0;}
.hhd{background: url("../img/banner.png") no-repeat center center;background-size: contain;}
.intro{padding:97px 0;width:75%;text-align: center;font-size:24px;}
.intro h1{font-size: 80px;font-weight: 700;}
.intro .btn{background-color: transparent;outline: none;}
.intro .btn:hover{background-color: aqua;}
.rownav{background-color:#2c3e50;height:auto;padding:6px 0;}
.rownav a{cursor:pointer;}
.navbar-default .navbar-nav > li > a{color:white;font-size: 14px;text-transform: uppercase;}
.navbar-default .navbar-nav > li > a:hover{color:orangered}
.navbar-default .navbar-brand{color:#fff;font-size: 22px;}
.navbar-default .navbar-brand:hover{color:orangered;}
.navbarcolor{background-color: transparent;border:none;margin-bottom: 0;}
.about{padding:70px 0;}
.about p{margin-bottom:20px;}
.about .btn{outline: none;background-color: #fff;transition: transform 1s;}
.about .btn:hover{background-color:#2c3e50;color:#fff;transform:scaleX(1.2) }
.h2bjt{border-bottom:3px solid orangered;height:3px;width:60px;display: inline-block;}
.about img{width:200px;height:200px;border-radius: 50%;display:inline-block;margin-bottom:50px;}
.services {padding:50px 0;background: url('../img/services-bg.jpg') no-repeat ;background-size: cover;background-attachment:fixed;}
.services i{font-size:50px;}
.services i span{transition: transform 1s;}
.services i:hover span{transform: scale(1.5);}
.services h4{color:orangered;}
.portfolio{padding:50px 0;}
.portfolio .ulnav{padding-left:0;display:flex;flex-direction: row;justify-content: center;font-size:16px;margin:20px 0;}
.portfolio .ulnav span{margin:0 20px;color:black;}
.portfolio .ulnav a{text-decoration: none;}
.portfolio .piclist{margin-bottom:20px;display: inline-block;position:relative;transition: transform 0.5s;}
.portfolio .piclist:hover{transform:scale(1.1);}
.portfolio .piclist:hover .a{opacity: 1;transition: opacity 0.5s;}
.portfolio .piclist .a{color:#fff;cursor:pointer;display: inline-block;width:100%;height:100%;position:absolute;top:0;left:0;opacity: 0;z-index:2;background-color: rgba(0,0,0,0.6)}
.portfolio .piclist .a h5{padding-top: 25%;font-weight: 700;transition: transform 0.5s;margin-bottom:5px;}
.portfolio .piclist:hover .a h5{transform:translateY(15px)}
.portfolio .piclist .a p{font-weight: 500;padding:8px;}
.portfolio .piclist .a span{transition: transform 0.5s;}
.portfolio .piclist:hover .a span{transform:translateY(15px)}
.portfolio .piclist img{display:inline-block;}
.skills{padding:50px 0;background: url('../img/skills-bg.jpg') no-repeat ;background-size: cover;background-attachment: fixed;}
.resume{padding:50px 0;background-color: #fdfdfd;}
.resume ul{position:relative;padding:0;display: inline-block;}
.resume ul li {margin-bottom:100px;display:inline-block;position:relative;width:100%;}
.resume ul li .circle{border:1px solid #ccc;position:absolute;left:calc(50% - 75px);z-index:3;width:150px;height:150px;border-radius: 50%;background-color: #fff;}
.resume ul li .circle h4{margin-top: 32%;}
.resume ul li:nth-child(even) .tt{float:right;}
.resume ul li .tt{width:40%;padding-top:1%;}
.resume ul li:nth-child(4){content:'';background-color: #858888;width:5px;position:absolute;left:50%;height:85%;bottom:0;z-index:1;}
.resume ul li .eh4 h4{color: #cca961;}
.resume ul li .eh4 .subheading{color:orangered;}
.resume ul li .xx{margin-left: 33px;text-align: right;}
.state{padding:50px 0;background:url('../img/achivements-bg.jpg') no-repeat;background-size: cover;background-attachment: fixed;}
.achievement-box i{color:#E87E04;font-size: 50px;}
.achievement-box span{font-size: 36px;font-weight: 700;color:#415161;}
.achievement-box h4{font-weight: 700;font-size: 14px;color:#415161;text-transform: uppercase;}
.testimonials{padding:50px 0;}
.contact{color:#fff;padding:50px 0;background:url('../img/contact-bg.jpg') no-repeat;background-size: cover;background-attachment: fixed;}
.contact button:hover{color:orangered;border-color: orangered;background-color: transparent;}
.contact button{background-color: transparent;color:white;}
.social ul{padding:0;margin-left:20%;width:60%;justify-content:space-between;display:flex;}
.social li{font-size:50px;}
.social li a{color:white;}
.social li a:hover{color:orangered;}
.zhanwei{height:62px;}
.rownav{position: relative;}
.onload{z-index: 1000;}
/*媒体查询*/
@media (max-width:1220px) {
    .intro{padding:200px 0;width:100%;font-size:18px;}
    .intro h1 {font-size:60px;}
    .ee ul li:nth-child(4):before{height:0;}
    .ee ul li .circle{width:110px;height:110px;}
    .ee ul li .xx{margin-left: 0px;text-align: left;}
}
@media (max-width:996px) {
    .resume ul li .circle{position:relative;float:left;left:0;width:20%;}
    .resume ul li .tt{float:left;text-align: left;width:75%;margin-left: 5%;}
    .resume ul li:nth-child(even) .tt{float:left;}
    .resume ul li:nth-child(4){height:0;}
    
}
@media (max-width:790px){
    .resume ul li .circle{float:left;width:100px;height:100px;border-radius: 50%;background-color: #fff;}
}
@media (max-width:622px) {
    .intro{width:100%;padding:100px 0;font-size:12px;}
    .intro h1 {font-size: 30px;}
    .social li{font-size:40px;}
}
@media (max-width: 544px) {
    .resume ul li .circle{position:relative;float:left;left:calc(50% - 50px);}
    .resume ul li .tt{width:100%;text-align: center;margin-left: 0;}
}
@media (max-width:479px) {
    .portfolio .ulnav span{margin:0 10px;}
    .social li{font-size:25px;}
}
@media (max-width:406px){
    .portfolio .ulnav span{margin:0 1px;display:none;}
    .portfolio .ulnav {font-size: 12px;}
    .portfolio .ulnav li{margin:0 2px;width:100%;}
}

